<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="margin-top: 50px;margin-left: 60px;">
  <h1>广告审核</h1>
  <div style="float: left;line-height: 40px;">广告名称:</div>
  <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable style="width: 212px;float: left;margin-left: 15px;">
  </el-input>
  <div style="float: left;line-height: 40px;margin-left: 120px;margin-right: 16px;">状态:</div>
  <template >
    <el-select v-model="value" placeholder="请选择" style="float: left;">
      <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>

  </template>
  <el-row style="float: left;margin-left: 70px;">
    <el-button type="primary" @click="inquire">查询</el-button>
  </el-row>

  <template>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%; padding-top: 40px;">
      <el-table-column
              prop="advertisingTitle"
              label="广告标题"
              width="280">
      </el-table-column>

      <el-table-column
              prop="source"
              label="广告来源"
              width="240">
      </el-table-column>
      <el-table-column
              prop="industry"
              label="广告行业"
              width="150">
      </el-table-column>
      <el-table-column
              prop="author"
              label="作者"
              width="150">
      </el-table-column>
      <el-table-column
              prop="startTime"
              label="发布时间"
              width="240">
      </el-table-column>
      <el-table-column
              prop="status"
              label="状态"
              width="100">
      </el-table-column>
      <el-table-column
              prop=""
              label="广告信息"
              width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="query(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
              prop=""
              label="操作"
              width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="pass(scope.row.id)">通过</el-button>
          <el-button type="text" @click="reject(scope.row.id)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <!--分页组件-->
  <div class="pagination-container">
    <el-pagination
            class="pagiantion"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
  </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../data/axios-0.18.0.js"></script>
<script>
    new Vue({
      el: '#app',
      data() {
        return {
          input: '',
          options: [
            {
              value: '选项1',
              label: '待审核'
            },
            {
              value: '选项2',
              label: '已审核'
            }
          ],
          value: '',
          tableData: [],
          pagination: {
            //分页相关模型数据
            currentPage: 1,	//当前页码
            pageSize:8,	//每页显示的记录数
            total:0,		//总记录数
          }
        }
      },
      created() {
        this.init()
      },
      methods: {
        pass(id) {
          this.$confirm('是否通过?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // alert(id)
            axios({
            url:'/advertising/'+id,
            method:'put',
            }).then(resp=>{
              if (resp.data.code == 1){
                this.$message({
                  type: 'success',
                  message: '成功通过!'
                });
                this.init()
              }else {
                this.$message.error(resp.data.msg)
              }
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消通过'
            });
          });
        },
        reject(id) {
          this.$confirm('是否驳回?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios({
              url:'/advertising/reject/'+id,
              method:'put',
            }).then(resp=>{
              if (resp.data.code == 1){
                this.$message({
                  type: 'success',
                  message: '驳回成功!'
                });
                this.init()
              }else {
                this.$message.error(resp.data.msg)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消驳回'
            });
          });
        },
        query(id){
          window.localStorage.setItem('advertisingId',id);
          location.href="advertising/query.html"
        },
        init(name,value){
          axios({
            method: "get",
            url: "/advertising/list/"+this.pagination.currentPage+"/"+this.pagination.pageSize,
            params:{
              name : name,
              state : value
            }
          }).then(res=>{
            this.pagination.total = res.data.data.total;
            this.pagination.currentPage = res.data.data.current;
            this.pagination.pagesize = res.data.data.size;
            this.tableData = res.data.data.records;
          })
        },
        inquire(){
          var name = this.input;
          var value = this.value;

          if(value!=null && value!=''){
            value = value == "选项1" ? "待审核" : "已审核"
          }

          this.init(name,value)
        },
        //切换页码
        handleCurrentChange(currentPage) {
          this.pagination.currentPage = currentPage;
          this.init();
        }
      }
    })
</script>
</html>